<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title></title>
    <style>
        body {
            background-color: #000;
            perspective: 2500px;
        }

        .touzi {
            width: 300px;
            height: 300px;
            margin: 200px auto;
            position: relative;
            transform-style: preserve-3d;
            /*transition: all 1s;*/
        }

        .touzi>div {
            text-align: center;
            font-size: 150px;
            line-height: 300px;
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #000;
            border-radius: 20px;
            background-color: #eee;
        }

        .dot {
            width: 50px;
            height: 50px;
            /*background-color: #000000;*/
            background: radial-gradient(25px 25px at center, #ccc, #000);
            position: absolute;
            border-radius: 50%;
        }

        .touzi>div:nth-child(1) {
            transform: translateZ(150px);
            /*background-color: red;*/
        }

        .one .dot.dot1 {
            left: 125px;
            top: 125px;
        }



        .touzi>div:nth-child(2) {
            transform: rotateY(-90deg) translateZ(150px);
        }

        .two .dot.dot1 {
            top: 50px;
            left: 125px;
        }

        .two .dot.dot2 {
            top: 200px;
            left: 125px;
        }




        .touzi>div:nth-child(3) {
            transform: rotateY(-180deg) translateZ(150px);
        }

        .three .dot.dot1 {
            left: 25px;
            top: 25px;
        }

        .three .dot.dot2 {
            left: 125px;
            top: 125px;
        }

        .three .dot.dot3 {
            left: 225px;
            top: 225px;
        }



        .touzi>div:nth-child(4) {
            transform: rotateY(-270deg) translateZ(150px);
        }

        .four .dot.dot1 {
            top: 50px;
            left: 50px;
        }

        .four .dot.dot2 {
            top: 50px;
            left: 200px;
        }

        .four .dot.dot3 {
            top: 200px;
            left: 50px;
        }

        .four .dot.dot4 {
            top: 200px;
            left: 200px;
        }




        .touzi>div:nth-child(5) {
            transform: rotateX(-90deg) translateZ(150px);
        }

        .five .dot.dot1 {
            top: 50px;
            left: 50px;
        }

        .five .dot.dot2 {
            top: 50px;
            left: 200px;
        }

        .five .dot.dot3 {
            top: 200px;
            left: 50px;
        }

        .five .dot.dot4 {
            top: 200px;
            left: 200px;
        }

        .five .dot.dot5 {
            top: 125px;
            left: 125px;
        }



        .touzi>div:nth-child(6) {
            transform: rotateX(90deg) translateZ(150px);
        }

        .six .dot.dot1 {
            left: 50px;
            top: 25px;
        }

        .six .dot.dot2 {
            left: 50px;
            top: 125px;
        }

        .six .dot.dot3 {
            left: 50px;
            top: 225px;
        }

        .six .dot.dot4 {
            left: 200px;
            top: 25px;
        }

        .six .dot.dot5 {
            left: 200px;
            top: 125px;
        }

        .six .dot.dot6 {
            left: 200px;
            top: 225px;
        }

        .top {
            width: 100%;
            font-size: 50px;
            text-align: center;
            position: fixed;
            top: -150px;
            color: #ffffff;
            cursor: pointer;
        }

        .right {
            height: 100%;
            font-size: 50px;
            text-align: center;
            position: fixed;
            right: 0;
            top: 0;
            color: #ffffff;
            cursor: pointer;
        }

        .bottom {
            width: 100%;
            font-size: 40px;
            text-align: center;
            position: fixed;
            cursor: pointer;
            bootom: 0;
            color: #ffffff;
        }

        .left {
            height: 100%;
            font-size: 50px;
            text-align: center;
            top: 0;
            position: fixed;
            cursor: pointer;
            left: 0;
            color: #ffffff;
        }

        a {
            position: fixed;
            height: 50px;
            width: 100px;
            background-color: #fff;
            color: #000000;
            line-height: 50px;
            text-align: center;
            bottom: -150px;
            left: 50%;
            margin-left: -50px;
            text-decoration: none;
            font-size: 25px;
        }
    </style>
</head>

<body>

    <div class="touzi">
        <div class="one">
            <div class="dot dot1"></div>
        </div>
        <div class="two">
            <div class="dot dot1"></div>
            <div class="dot dot2"></div>
        </div>
        <div class="three">
            <div class="dot dot1"></div>
            <div class="dot dot2"></div>
            <div class="dot dot3"></div>
        </div>
        <div class="four">
            <div class="dot dot1"></div>
            <div class="dot dot2"></div>
            <div class="dot dot3"></div>
            <div class="dot dot4"></div>
        </div>
        <div class="five">
            <div class="dot dot1"></div>
            <div class="dot dot2"></div>
            <div class="dot dot3"></div>
            <div class="dot dot4"></div>
            <div class="dot dot5"></div>
        </div>
        <div class="six">
            <div class="dot dot1"></div>
            <div class="dot dot2"></div>
            <div class="dot dot3"></div>
            <div class="dot dot4"></div>
            <div class="dot dot5"></div>
            <div class="dot dot6"></div>
        </div>
    </div>


    <div class="top">^</div>
    <div class="right">&gt;</div>
    <div class="bottom">V</div>
    <div class="left">&lt;</div>
    <a href="javascript:void(0)">随 机</a>
</body>

</html>
<script>
    var arr = ["top", "right", "bottom", "right"];
    //        var one = document.createElement("div");
    //    one.className = "one";
    //         one.innerHTML = '<div class="dot dot1"> </div>';
    //
    //
    //        var two = document.createElement("div");
    //    one.className = "two";
    //    two.innerHTML = '<div class="dot dot1"></div><div class="dot dot2"></div>'
    //
    //
    //        var three = document.createElement('div');
    //    three.className = "three";
    //    three.innerHTML = '<div class="dot dot1"></div ><div class="dot dot2"></div><div class="dot dot3"></div>';
    //
    //
    //
    //        var four = document.createElement('div');
    //    four.className = "four";
    //    four.innerHTML = '<div class="dot dot1"></div ><div class="dot dot2"></div><div class="dot dot3"></div><div class="dot dot4"></div>';
    //
    //
    //
    //        var five = document.createElement('div');
    //    five.className = "five";
    //    five.innerHTML = '<div class="dot dot1"></div ><div class="dot dot2"></div><div class="dot dot3"></div><div class="dot dot4"></div><div class="dot dot5"></div>';
    //
    //
    //
    //        var six = document.createElement('div');
    //    six.innerHTML = "six";
    //    six.innerHTML = '<div class="dot dot1"></div ><div class="dot dot2"></div><div class="dot dot3"></div><div class="dot dot4"></div><div class="dot dot5"></div><div class="dot dot6"></div>'
    //
    //

    var touzi = document.querySelector(".touzi");
    var flag = true;


    document.querySelector(".top").onclick = function () {
        if (flag) {
            flag = false;
            touzi.style.transition = "all 1s";
            touzi.style.transform = "rotateX(90deg)";
            setTimeout(function () {
                touzi.style.transition = "none";
                touzi.style.transform = "none";
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(5)"), document.querySelector(".touzi >div:nth-child(1)"));
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(3)"), document.querySelector(".touzi >div:nth-child(2)"));
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(6)"), document.querySelector(".touzi >div:nth-child(3)"));
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(6)"), document.querySelector(".touzi >div:nth-child(4)"));
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(6)"), document.querySelector(".touzi >div:nth-child(5)"));
                flag = true;
            }, 1200)
        }


    }

    document.querySelector(".bottom").onclick = function () {
        if (flag) {
            flag = false;
            touzi.style.transition = "all 1s";
            touzi.style.transform = "rotateX(-90deg)";
            setTimeout(function () {
                touzi.style.transition = "none";
                touzi.style.transform = "none";
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(6)"), document.querySelector(".touzi >div:nth-child(1)"));
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(3)"), document.querySelector(".touzi >div:nth-child(2)"));
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(6)"), document.querySelector(".touzi >div:nth-child(3)"));
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(6)"), document.querySelector(".touzi >div:nth-child(4)"));
                flag = true;
            }, 1200)
        }

    }




    document.querySelector(".right").onclick = function () {
        if (flag) {
            flag = false;
            touzi.style.transition = "all 1s";
            touzi.style.transform = "rotateY(90deg)";
            setTimeout(function () {
                touzi.style.transition = "none";
                touzi.style.transform = "none";
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(1)"), document.querySelector(".touzi >div:nth-child(5)"));
                flag = true;
            }, 1200)
        }

    }



    document.querySelector(".left").onclick = function () {
        if (flag) {
            flag = false;
            touzi.style.transition = "all 1s";
            touzi.style.transform = "rotateY(-90deg)";
            setTimeout(function () {
                touzi.style.transition = "none";
                touzi.style.transform = "none";
                touzi.insertBefore(document.querySelector(".touzi >div:nth-child(4)"), document.querySelector(".touzi >div:nth-child(1)"));
                flag = true;
            }, 1200);
        }




    }
    document.querySelector("a").onclick = function () {
        touzi.style.transition = "all 1s";
        touzi.style.transform = "rotateX(" + 90 * Math.floor(Math.random() * 4) + "deg) rotateY(" + 90 * Math.floor(Math.random() * 4) + "deg) rotateZ(" + 90 * Math.floor(Math.random() * 4) + "deg)"

    }

</script>